<template>
    <div>
      <!-- 左边 -->
      <div class="left" >
        <div class="leftWhith">
          <div class="newapp">审批新申请</div>
  
  
  
          <!-- icon加题头 -->
          <div v-for="(item , index) of apply" :key="index" >
            <div class="gate">{{item.name}}</div>
            <div style="width: 101%" >
  
              <div class="iconBorder"  v-for="(itemx,indexx) of item.iconxx" :key="indexx" @click="drawer = true">
                <i :class="itemx.icon"></i>
                <div>{{itemx.iconNum}}</div>
  
             
             
              </div>
            </div>
            <div class="clear"></div>
          </div>
  
  
  
  
  
  
        </div>
      </div>
      <!-- 右边 -->
      <div class="right">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="全部" name="first">
            <div class="newapp">用户管理</div>
            <iStarted></iStarted>
          </el-tab-pane>
          <el-tab-pane label="待审批" name="second">配置管理</el-tab-pane>
          <el-tab-pane label="审核通过" name="third">角色管理</el-tab-pane>
          <el-tab-pane label="审批拒绝" name="fourth">定时任务补偿</el-tab-pane
          >
        </el-tabs>
      </div>
      <div class="clear"></div>
  
            <!-- 抽屉 -->
                    <span>
                    <el-drawer
                    title="我是标题"
                    size="50%"
                    style="margin:0;padding:0;border: 0;"
                    :visible.sync="drawer"
                    :with-header="false">
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="活动名称" prop="name">
      <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>
    <el-form-item label="活动区域" prop="region">
      <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="活动时间" required>
      <el-col :span="11">
        <el-form-item prop="date1">
          <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col class="line" :span="2">-</el-col>
      <el-col :span="11">
        <el-form-item prop="date2">
          <el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
        </el-form-item>
      </el-col>
    </el-form-item>
    <el-form-item label="即时配送" prop="delivery">
      <el-switch v-model="ruleForm.delivery"></el-switch>
    </el-form-item>
    <el-form-item label="活动性质" prop="type">
      <el-checkbox-group v-model="ruleForm.type">
        <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
        <el-checkbox label="地推活动" name="type"></el-checkbox>
        <el-checkbox label="线下主题活动" name="type"></el-checkbox>
        <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="特殊资源" prop="resource">
      <el-radio-group v-model="ruleForm.resource">
        <el-radio label="线上品牌商赞助"></el-radio>
        <el-radio label="线下场地免费"></el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="活动形式" prop="desc">
      <el-input type="textarea" v-model="ruleForm.desc"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
      <el-button @click="resetForm('ruleForm')">重置</el-button>
    </el-form-item>
  </el-form>
                  </el-drawer>
                </span>
    </div>
  </template>
  <script>
    import iStarted from "@/components/iStarted"
  export default {
    data() {
      return {
        activeName: "first",
        drawer: false,
        drawer1: false,
        drawer2: false,
        drawer3: false,
        ruleForm: {
            name: '',
            region: '',
            date1: '',
            date2: '',
            delivery: false,
            type: [],
            resource: '',
            desc: ''
          },
          rules: {
            name: [
              { required: true, message: '请输入活动名称', trigger: 'blur' },
              { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
            region: [
              { required: true, message: '请选择活动区域', trigger: 'change' }
            ],
            date1: [
              { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
            ],
            date2: [
              { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
            ],
            type: [
              { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
            ],
            resource: [
              { required: true, message: '请选择活动资源', trigger: 'change' }
            ],
            desc: [
              { required: true, message: '请填写活动形式', trigger: 'blur' }
            ]},
        apply:[{ 
            name:"假勤",
            iconxx:[
              {icon:'el-icon-s-order',iconNum:'请假',id:"drawer = true"},
              {icon:'el-icon-s-cooperation',iconNum:'出差',id:"drawer1 = true"},
              {icon:'el-icon-s-finance',iconNum:'外出',id:"drawer2 = true"},
              {icon:'el-icon-s-opportunity',iconNum:'加班',id:"drawer3 = true"},
            ],
            id:"drawer = true"
      },
      { 
            name:"行政",
            iconxx:[
              {icon:'el-icon-s-order',iconNum:'请假',id:"drawer = true"},
              {icon:'el-icon-s-cooperation',iconNum:'出差',id:"drawer1 = true"},
              {icon:'el-icon-s-finance',iconNum:'外出',id:"drawer2 = true"},
              {icon:'el-icon-s-opportunity',iconNum:'加班',id:"drawer3 = true"},
            ],
            id:"drawer2 = true"
      },
    ]
      };
    },
    components:{
      iStarted
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
    },
  };
  </script>
  <style scoped lang="less">
  * {
    margin: 0;
    padding: 0;
  }
  
  
  .clear {
    clear: both;
  }
  .iconBorder {
      padding-top: 18px;
      padding-bottom: 8px;
      font-size: 24px;
      display: block;
      padding-bottom: 5px;
      color: #4285f4;
  
    div {
      font-size: 12px;
      color: #383838;
      padding-bottom: 18px;
    }
  }
  .newapp {
    line-height: 36px;
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid rgba(0, 0, 0, 0.081);
    padding: 0 10px;
  }
  .gate {
    line-height: 36px;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid rgba(0, 0, 0, 0.081);
    border-top: 1px solid rgba(0, 0, 0, 0.081);
    padding: 0 10px;
  }
  
  @media screen and (min-width: 1192px) {
    .left {
      float: left;
      width: 24%;
      box-sizing: border-box;
      border: 1px solid rgba(0, 0, 0, 0.081);
      background-color: white;
      margin: 6px;
    }
    .iconBorder {
      width: 33.3333333333333333333333333333333333333333333333333333333333%;
      float: left;
      border: 1px solid rgba(0, 0, 0, 0.081);
      box-sizing: border-box;
      height: 80px;
      text-align: center;
      margin-left: -1px;
      cursor: pointer;
    }
    .right {
      float: left;
      border: 1px solid rgba(0, 0, 0, 0.081);
      width: 73%;
      margin: 6px;
    }
  }
  @media screen and (max-width: 1191px) {
    .left {
      box-sizing: border-box;
      border: 1px solid rgba(0, 0, 0, 0.081);
      background-color: white;
      width: 100%;
    }
    .iconBorder {
      border-top: 1px solid rgba(0, 0, 0, 0.081);
      height: 80px;
      text-align: center;
      cursor: pointer;
    }
    .right {
      border: 1px solid rgba(0, 0, 0, 0.081);
      width: 100%;
    }
  }
  </style>